<script setup>
import { ref, onMounted, nextTick } from "vue";
import '@/fonts/icomoon.css'
import * as echarts from 'echarts'
import detailVue from '@/views/SiteMana/detail.vue'


const points1 = ref([
    { value: 80, name: '较好' }
])
const points2 = ref([
    { value: 80, name: '较好' }
])
const points3 = ref([
    { value: 80, name: '较好' },
    { value: 67, name: '一般' },
    { value: 50, name: '差' }
])

const initPieCharts1 = () => {
    const charts = echarts.init(document.querySelector('.routePie'))
    const option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },

        color: ['#00ff00', '#ed3f35', '#eacf19'],

        series: [
            {
                name: '点位统计',
                type: 'pie',
                radius: ['40%', '60%'],
                center: ['40%', '40%'],
                roseType: 'radius',
                itemStyle: {
                    borderRadius: 5
                },
                data: points1.value,

                label: {
                    fontSize: 15,
                    color: 'inherit'
                },
                labelLine: {
                    length: 15,
                    length2: 8
                }
            }
        ]
    };
    // 配置项和数据给我们的实例化对象
    charts.setOption(option)
    // 浏览器缩放，图表等比例缩放
    window.addEventListener('resize', function () {
        charts.resize()
    })
}
const initPieCharts2 = () => {
    const charts = echarts.init(document.querySelector('.exchangePie'))
    const option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },

        color: ['#00ff00', '#ed3f35', '#eacf19'],

        series: [
            {
                name: '点位统计',
                type: 'pie',
                radius: ['40%', '60%'],
                center: ['40%', '40%'],
                roseType: 'radius',
                itemStyle: {
                    borderRadius: 5
                },
                data: points2.value,

                label: {
                    fontSize: 15,
                    color: 'inherit'
                },
                labelLine: {
                    length: 15,
                    length2: 8
                }
            }
        ]
    };
    // 配置项和数据给我们的实例化对象
    charts.setOption(option)
    // 浏览器缩放，图表等比例缩放
    window.addEventListener('resize', function () {
        charts.resize()
    })
}
const initPieCharts3 = () => {
    const charts = echarts.init(document.querySelector('.APPie'))
    const option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },

        color: ['#00ff00', '#ed3f35', '#eacf19'],

        series: [
            {
                name: '点位统计',
                type: 'pie',
                radius: ['40%', '60%'],
                center: ['40%', '40%'],
                roseType: 'radius',
                itemStyle: {
                    borderRadius: 5
                },
                data: points3.value,

                label: {
                    fontSize: 15,
                    color: 'inherit'
                },
                labelLine: {
                    length: 15,
                    length2: 8
                }
            }
        ]
    };
    // 配置项和数据给我们的实例化对象
    charts.setOption(option)
    // 浏览器缩放，图表等比例缩放
    window.addEventListener('resize', function () {
        charts.resize()
    })
}
  
onMounted(() => {
    initPieCharts1()
    initPieCharts2()
    initPieCharts3()
    
})
 
</script>

<template>
    <div class="viewport">
        <div class="column">
            <div class="panel route">
                <div class="inner">
                    <div class="chart">
                        <div class="data">
                            <div class="item">
                                <span>
                                    <i class="icon-dot" style="color: #00ff00"></i>
                                    较好(>70)
                                </span>
                            </div>
                            <div class="item">
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    一般(50-70)
                                </span>
                            </div>
                            <div class="item">
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    差(<70) </span>
                            </div>
                        </div>
                        <div class="box">
                            <div class="column">
                                <h3>路由器</h3>
                                <div class="image">
                                    <div class="routePie" ref="routePie"></div>
                                </div>
                            </div>
                            <div class="column">
                                <h3>交换机</h3>
                                <div class="exchangePie" ref="exchangePie"></div>
                            </div>
                            <div class="column">
                                <h3>AP</h3>
                                <div class="APPie" ref="APPie"></div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
            <div class="detail">
                <detailVue></detailVue>  
                           
            </div>
        </div>

    </div>
</template>

<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h3 {
    font-size: 20px;
    color: #fff;
    font-weight: 400;
}

.viewport {
    background: url(@/assets/bg.jpg) no-repeat 0 0 / cover;
    display: flex;
    min-width: 1024px;
    max-width: 1920px;
    margin: 0 auto;
    // padding: 88px 20px 0;
    min-height: 780px;
    // overflow: hidden;

    .column {
        flex: 2;
        margin: 0 5px;

        .panel {
            position: relative;
            border: 15px solid transparent;
            border-width: 51px 38px 20px 132px;
            border-image-source: url(@/assets/border.png);
            border-image-slice: 51 38 20 132;
            margin-bottom: 20px;

            h3 {
                font-size: 20px;
                color: #fff;
                font-weight: 400;
            }

            .inner {
                position: absolute;
                top: -51px;
                left: -132px;
                right: -38px;
                bottom: -20px;
                padding: 24px 36px;
                // background-color: red;

                .row {
                    display: flex;
                    justify-content: space-between;
                    line-height: 1.05;
                    font-size: 12px;
                    color: #61a8ff;
                    margin-top: 20px;
                    // padding: 12px 36px;

                }
            }
        }

    }


}

// 路由器
.route {
    height: 300px;

    .chart {
        display: flex;
        justify-content: space-around;

        .data {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 168px;
            height: 240px;
            background-size: cover;
            background-image: url(@/assets/rect.png);

            .item {
                margin-left: 20px;

                span {
                    display: block;
                    color: #4c9bfd;
                    font-size: 16px;
                }
            }

        }

        .box {
            display: flex;
            justify-content: space-around;


            .column {


                h3 {
                    display: flex;
                    justify-content: center;
                }

            }

            .routePie,
            .exchangePie,
            .APPie {
                margin-top: 20px;
                margin-left: 55px;
                width: 312px;
                height: 240px;

            }

        }
    }


}

 
</style>